date picker 관련 프론트엔드 모듈은 꽤 널리고 널렸습니다. 하지만 오늘 소개해 드릴 date picker는 특별할 지도 모르겠습니다. 왜냐구요? airbnb에서 공개하는 date picker 이기 때문입니다. 일정을 정하고 숙박 날짜를 정하는 데 누구보다 고민을 많이 했을 것 같은 모듈입니다.

2016/08/22 Editor’s choice

airbnb/react-dates
_react-dates - An accessible, easily internationalizable, mobile-friendly datepicker library for the web_github.com

한번 샘플 페이지에서 사용을 해 봐도 간단하지만 멋진 UX에 감탄이 나오는 군요. 아마 사용방법도 간단하겠죠?

설치

$npm install

$npm run storybook

git clone 받은 뒤에 npm 명령어를 실행시키고 나면 아래와 같은 창이 뜹니다.

실행코드

실제 코드에서는 다음과 같이 사용됩니다.

DateRangePicker, SingleDatePicker, DayPicker중에 하나를 JSX코드에서 가져와 onDatesChange, onFocusChane, focusedInput등의 이벤트를 처리할 수 있는 메쏘드 들로 지정해 주면 됩니다.

By Keen Dev on August 21, 2016.

Exported from Medium on May 31, 2017.